<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="css/common.css" rel="stylesheet">
</head>
<body>
	<!--顶部-->
	<header class="header left">
	  <div class="left nav">
	      <ul>
	          <li><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
	          <li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
	          <li class="nav_active"><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
	          <li ><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
	          </ul>
	  </div>
	    <div class="header_center left" style="position:relative">
	        <h2><strong>大数据展示</strong></h2>
	    </div>
	    <div class="right nav text_right"><ul></ul></div>
	</header>
	<!--内容部分-->
	<div class="con left" style="width:50%;">
	    <!--统计分析图-->
	    <div class="div_any">
	        <div class="left div_any01" style="width:100%;">
	    		<div class="div_any_child " style="width:98%;position:relative;height: 420px;">
	                <div class="div_any_title"><img src="images/title_13.png">主要传染病</div>
	                <!--  柱形图 data-style="nosplity"不显示y轴分隔线'rotate':40旋转40度-->
	                <div id="histogramChart1"  class="loadItem" data-url="data/trend_chuanranbing.json" data-type="bar" data-color='["#5bc0de"]'
	                	data-axis-color="#fff" data-style="nosplity" shieldSettings="{'xAxis': {'axisLabel':{'rotate':40}}}"
	              		style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
	              	<!--  折线图 data-style="nosplity area smooth" 不显示y轴分隔线 面积模式 平滑模式-->
	                <div id="lineChart1" class="loadItem" data-url="data/trend_chuanranbingqushi.json" data-type="line"
	                	data-axis-color="#fff,line:#ff7f50" data-style="nosplity area smooth nospace"  data-color="#ff7f50"
	                	 style="width: 52%;height: 66%;display: inline-block;"></div>
	               	<!--  概况统计 -->
	                <div class="loadItem" data-url="data/trend_countNum.json" data-type="count" style="width: 86%;height: 20%;display: inline-block;color:red;position: absolute;right: 2%;top: 8%;">
	                  	<div style="display: inline-block;width:31%;text-align:center;">
	                    	<div style="color:#fff;font-size: 18px;line-height: 32px;">病例报告数</div>
	                    	<div style="color:#87cefa;font-size: 30px;line-height: 42px;" class="_count0"></div>
	                  	</div>
	                  	<div style="display: inline-block;width:31%;text-align:center;">
	                    	<div style="color:#fff;font-size: 18px;line-height: 32px;">死亡数</div>
	                    	<div style="color:red;font-size: 30px;line-height: 42px;" class="_count1"></div>
	                  	</div>
	                  	<div style="display: inline-block;width:33%;text-align:center;">
	                    	<div style="color:#fff;font-size: 18px;line-height: 32px;">同比发病数趋势</div>
	                    	<div style="color:#ff7f50;font-size: 30px;line-height: 42px;"><span class="_count2"></span>%</div>
	                  	</div>
	                </div>
	            </div>
	        </div>
			<div class="left div_any01" style="width:48%;">
	          	<div class="div_any_child" style="height: 420px;">
					<div class="div_any_title"><img src="images/title_14.png">主要症状</div>
	             	<!--  柱形图 -->
	              	<p id="histogramChart2" class="p_chart loadItem" data-url="data/trend_zhuyaozhengzhuang.json" data-type="bar" data-color='["#FD6C88"]'
	              		 data-axis-color="#fff" data-style="nosplity nosplitx vertical"
	              		style="height: 400px;"></p>
	          </div>
	        </div>
	          <div class="left div_table_box" style="width: 48%;">
	              <div class="div_any_child" style="height: 420px;">
	                  <div class="div_any_title"><img src="images/title_16.png">预警信息</div>
	                  <!-- 表格列表 -->
	                  <div class="table_p loadItem" data-url="data/trend_list.json" data-type="list"></div>
	              </div>
	          </div>
	      </div>
	    </div>
	</div>
	<div class="con right" style="width:50%;">
	  <div class="div_any">
	      <div class="left div_any01" style="width:100%;">
	          <div class="div_any_child" style="width:98%;position:relative;height: 420px;">
	              <div class="div_any_title"><img src="images/title_17.png">主要疾病排行</div>
	              <!-- 自定义图，横向柱状占比图data-grid-style="right:40,left:120"调整左右距离data-style="notitle"不显示标题 -->
	              <div id="histogramChart3"  class=" loadItem" data-url="data/trend_jibingpaihang.json" data-type="extend" data-extendfn="barPercent" 
	                	data-grid-style="right:40,left:120,top:10%" data-style="notitle" style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
	              <!-- 折线图，发病人数 -->
	              <div id="lineChart2" class=" loadItem" data-url="data/trend_jibingfabingrenshu.json" data-type="line" 
	              	data-axis-color="#fff,line:#32cd32" data-style="nosplity nospace area smooth" data-color="#32cd32" data-grid-style="top:10%,bottom:15%"
	              	style="width: 52%;height: 90%;display: inline-block;"></div>
	          </div>
	      </div>
	      <div class="left div_any01" style="width:48%;">
	        <div class="div_any_child" style="height: 420px;">
	            <div class="div_any_title"><img src="images/title_18.png">年龄分布</div>
	           	<!--  饼状图 -->
	            <p id="pieChart1" class="p_chart loadItem" data-url="data/trend_nianlingfenbu.json" data-type="pie" data-color='["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"]'
	            	data-rose="area"  data-ring='[30, 110]' data-legend="[]" 	style="height: 400px;"></p>
	        </div>
	      </div>
	      <div class="right div_any01" style="width:48%;">
	          <div class="div_any_child" style="height: 420px;">
	              <div class="div_any_title"><img src="images/title_19.png">性别分布</div>
	              <!--  饼状图 -->
	              <p id="pieChart2" class="p_chart loadItem" data-url="data/trend_xingbiefenbu.json" data-type="pie" data-color='["#87cefa","#FD6C88"]'
	              	data-ring='[55, 95]' data-legend="[]" data-style="percent avoidLabelOverlap " shieldSettings="{series:[{itemStyle : labelFromatter}]}" style="height: 400px;"></p>
	          </div>
	      </div>
	  </div>
	</div>
    <script type="text/javascript">
    //性别分布
    labelFromatter = {
        normal : {
            label : {
               	position : 'center',
				formatter : function (params){
                  	console.log("out=====")
                  	console.log(params)
                   	return params.name+":"+(params.percent + '%')
                },
            },
            labelLine : {
                show : false
            }
        },
    };
    </script>
	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
	
</body>
</html>
